<template>
    <div class="welcome">
        <el-row>
            <el-col :span="24">
                <el-card shadow="never">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <div class="grid-content d-flex">
                                <div class="avatar">
                                    <el-avatar :size="68" fit :src="avatar"></el-avatar>
                                </div>
                                <div class="title d-grid a-center">
                                    <h1>早安，{{name}}，开始您一天的工作吧！</h1>
                                    <span>今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content d-flex j-sa">
                                <div class="d-grid">
                                    <div>
                                        <i class="ele-tag-round el-tag el-tag--small el-tag--light el-icon-menu"></i>
                                        <span style="margin-left:5px;font-family:electronicFont">文章数目</span>
                                    </div>
                                    <div class="ele-tag-title">20</div>
                                </div>
                                <div class="d-grid">
                                    <div>
                                        <i class="ele-tag-round el-tag el-tag--small el-tag--light el-icon-finished"></i>
                                        <span style="margin-left:5px">分类数目</span>
                                    </div>
                                    <div class="ele-tag-title">10</div>
                                </div>
                                <div class="d-grid">
                                    <div>
                                        <i class="ele-tag-round el-tag el-tag--small el-tag--light el-icon-bell"></i>
                                        <span style="margin-left:5px">用户数目</span>
                                    </div>
                                    <div class="ele-tag-title">8</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="3" v-for="(item,index) in data_icon" :index="'' + index" :key="index">
                <div class="iconl">
                    <el-card shadow="hover">
                        <div class="grid-content d-grid j-center text-center">
                            <i :class="item.icon"></i>
                            <span>{{item.title}}</span>
                        </div>
                    </el-card>
                </div>
            </el-col>

        </el-row>

        <el-row :gutter="10">

            <el-col :span="16">
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>用户分布</span>
                    </div>
                    <div class="">
                        <Echart_china></Echart_china>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>评价数据分析</span>
                    </div>
                    <div class="">
                        <Echart_bar></Echart_bar>
                    </div>
                </el-card>
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>热门搜索</span>
                    </div>
                    <div class="">
                        <WordCloudChart></WordCloudChart>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>


<script>
    import Echart_bar from '@/components/echarts/echart_bar'
    import Echart_china from '@/components/echarts/echart_china'
    import WordCloudChart from '@/components/echarts/wordCloudChart'
    import { mapState } from 'vuex'

    export default {
        components: { Echart_bar, Echart_china, WordCloudChart },
        data() {
            return {
                echarts05Data: [
                    {
                        name: '十九大精神',
                        value: 15000,
                    },
                    {
                        name: '两学一做',
                        value: 10081,
                    },
                    {
                        name: '中华民族',
                        value: 9386,
                    },
                    {
                        name: '马克思主义',
                        value: 7500,
                    },
                    {
                        name: '民族复兴',
                        value: 7500,
                    },
                    {
                        name: '社会主义制度',
                        value: 6500,
                    },
                    {
                        name: '国防白皮书',
                        value: 6500,
                    },
                    {
                        name: '创新',
                        value: 6000,
                    },
                    {
                        name: '民主革命',
                        value: 4500,
                    },
                    {
                        name: '文化强国',
                        value: 3800,
                    },
                    {
                        name: '国家主权',
                        value: 3000,
                    },
                    {
                        name: '武装颠覆',
                        value: 2500,
                    },
                    {
                        name: '领土完整',
                        value: 2300,
                    },
                    {
                        name: '安全',
                        value: 2000,
                    },
                    {
                        name: '从严治党',
                        value: 1900,
                    },
                    {
                        name: '现代化经济体系',
                        value: 1800,
                    },
                    {
                        name: '国防动员',
                        value: 1700,
                    },
                    {
                        name: '信息化战争',
                        value: 1600,
                    },
                    {
                        name: '局部战争',
                        value: 1500,
                    },
                    {
                        name: '教育',
                        value: 1200,
                    },
                    {
                        name: '职业教育',
                        value: 1100,
                    },
                    {
                        name: '兵法',
                        value: 900,
                    },
                    {
                        name: '一国两制',
                        value: 800,
                    },
                    {
                        name: '特色社会主义思想',
                        value: 700,
                    },
                ],
                ip: '39.99.40.215',
                ip_adress: '甘肃兰州',
                data_icon: [
                    { icon: 'el-icon-user', title: '添加文章', path: '' },
                    { icon: 'el-icon-user', title: '文章管理', path: '' },
                    { icon: 'el-icon-user', title: '添加分类', path: '' },
                    { icon: 'el-icon-user', title: '分类管理', path: '' },
                    { icon: 'el-icon-user', title: '添加用户', path: '' },
                    { icon: 'el-icon-user', title: '用户管理', path: '' },
                    { icon: 'el-icon-user', title: '类型待定', path: '' },
                    { icon: 'el-icon-user', title: '类型待定', path: '' },
                ],
            }
        },

        computed: {
            // 使用
            // ...mapState(["tabsModule/RoutingPathData"]),
            // ...mapState("tabsModule", {
            //     editableTabs: (state) => state.RoutingPathData,
            // }),
            ...mapState({
                name: state => state.loginModule.manager_info.mg_name,
                avatar: state => state.loginModule.manager_info.avatar,
            }),
        },

        methods: {},
    }
</script>

<style less="scss" scoped>
    .welcome {
        background: transparent;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .grid-content .title {
        margin-left: 20px;
    }
    .grid-content .title h1 {
        font-size: 20px;
        font-weight: normal;
    }
    /* .iconl .el-card:hover {
                        cursor: pointer;
                        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15) !important;
                    } */
    .ele-tag-title {
        font-size: 24px;
        margin-top: 6px;
        text-align: end;
    }
    .ele-tag-round {
        width: 24px;
        padding-left: 0;
        padding-right: 0;
        border-radius: 50%;
        text-align: center;
    }
    .avatar:hover .el-avatar {
        cursor: pointer;
        transform: rotate(360deg);
        transition: 0.5s;
        /* border: 1px solid red; */
    }
    .iconl i {
        font-size: 32px;
        margin-bottom: 10px;
    }
</style>

